<template>
  <div>
    <div class="toolbar">
      <div>
        <button @click="openAddDialog" class="aaa">添加新记录</button>
        <button @click="exportData" class="bbb">导出数据</button>
      </div>
      <input v-model="searchQuery" placeholder="搜索记录" class="ccc" />
    </div>
    <el-table :data="filteredRecords">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="type" label="类型"></el-table-column>
      <el-table-column prop="amount" label="金额"></el-table-column>
      <el-table-column prop="description" label="描述"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="editRecord(scope.row)">编辑</el-button>
          <el-button @click="deleteRecord(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :visible.sync="isDialogVisible" title="记录">
      <el-form :model="currentRecord" ref="recordForm" :rules="rules">
        <el-form-item label="日期" prop="date">
          <el-date-picker v-model="currentRecord.date"></el-date-picker>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-select v-model="currentRecord.type">
            <el-option label="收入" value="income"></el-option>
            <el-option label="支出" value="expense"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="金额" prop="amount">
          <el-input v-model="currentRecord.amount" type="number"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="currentRecord.description"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveRecord">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";
axios.defaults.baseURL = "http://localhost:8081";

export default {
  data() {
    return {
      records: [],
      searchQuery: "",
      isDialogVisible: false,
      currentRecord: {
        date: "",
        type: "",
        amount: "",
        description: "",
      },
      rules: {
        date: [{ required: true, message: "请选择日期", trigger: "blur" }],
        type: [{ required: true, message: "请选择类型", trigger: "change" }],
        amount: [{ required: true, message: "请输入金额", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      },
    };
  },
  computed: {
    filteredRecords() {
      return this.records.filter((record) => {
        return (
          (record.description &&
            record.description.includes(this.searchQuery)) ||
          (record.amount && record.amount.toString().includes(this.searchQuery))
        );
      });
    },
  },
  methods: {
    fetchRecords() {
      axios
        .get("/api/transactions")
        .then((response) => {
          this.records = response.data;
        })
        .catch((error) => {
          console.error("获取记录时出错: ", error);
        });
    },
    openAddDialog() {
      this.currentRecord = { date: "", type: "", amount: "", description: "" };
      this.isDialogVisible = true;
    },
    editRecord(record) {
      this.currentRecord = { ...record };
      this.isDialogVisible = true;
    },
    saveRecord() {
      this.$refs.recordForm.validate((valid) => {
        if (valid) {
          if (this.currentRecord.id) {
            axios
              .put(
                `/api/transactions/${this.currentRecord.id}`,
                this.currentRecord
              )
              .then(() => this.fetchRecords())
              .catch((error) => {
                console.error("更新记录时出错:", error);
              });
          } else {
            axios
              .post("/api/transactions", this.currentRecord)
              .then(() => this.fetchRecords())
              .catch((error) => {
                console.error("添加记录时出错:", error);
              });
          }
          this.isDialogVisible = false;
        }
      });
    },
    deleteRecord(record) {
      axios
        .delete(`/api/transactions/${record.id}`)
        .then(() => this.fetchRecords())
        .catch((error) => {
          console.error("删除记录时出错:", error);
        });
    },
    exportData() {
      // 数据导出功能的实现
    },
  },
  created() {
    this.fetchRecords();
  },
};
</script>

<style scoped>
.toolbar {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.toolbar button {
  width: 80px;
  height: 30px;
  border: none;
  color: #fff;
  border-radius: 10px;
  margin-left: 10px;
}
.toolbar .ccc{
  width: 200px;
  height: 28px;
  outline: none;
  border: none;
  border: 1px solid #666;
  border-radius: 10px;
  margin-right: 3vw;
}
.aaa {
  background-color: rgb(34, 247, 34);
}
.bbb{
  background-color: rgb(233, 70, 70);
}
</style>
